<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table</title>
		<link href="../../../dist/css/color-ui.css" rel="stylesheet">
		<link href="../base.css" rel="stylesheet"/>
		<link href="table.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<h1>表格 Table</h1>
			<h2>条纹状表格（隔行变色）</h2>
			<table class="table table-striped">
				<caption>Optional table caption.</caption>
				<thead>
					<tr>
						<th>No</th>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Username</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Mark</td>
						<td>Otto</td>
						<td>@mdo</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Jacob</td>
						<td>Thornton</td>
						<td>@fat</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Mark</td>
						<td>the Bird</td>
						<td>@twitter</td>
					</tr>
				</tbody>
			</table>
			<h2>带边框表格（鼠标悬停）</h2>
			<table class="table table-bordered table-hover">
				<caption>Optional table caption.</caption>
				<thead>
					<tr>
						<th>No</th>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Username</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Mark</td>
						<td>Otto</td>
						<td>@mdo</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Jacob</td>
						<td>Thornton</td>
						<td>@fat</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Mark</td>
						<td>the Bird</td>
						<td>@twitter</td>
					</tr>
				</tbody>
			</table>
			<h2>状态类</h2>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th class="NoTh">No</th>
						<th class="ClassTh">class</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr class="active">
						<td>1</td>
						<td>.active</td>
						<td>鼠标悬停在行或单元格上时所设置的颜色</td>
					</tr>
					<tr>
						<td>2</td>
						<td>...</td>
						<td>...</td>
					</tr>
					<tr class="success">
						<td>3</td>
						<td>.success</td>
						<td>标识成功或积极的动作</td>
					</tr>
					<tr>
						<td>4</td>
						<td>...</td>
						<td>...</td>
					</tr>
					<tr class="info">
						<td>5</td>
						<td>.info</td>
						<td>标识普通的提示信息或动作</td>
					</tr>
					<tr>
						<td>6</td>
						<td>...</td>
						<td>...</td>
					</tr>
					<tr class="warning">
						<td>7</td>
						<td>.warning</td>
						<td>标识警告或需要用户注意</td>
					</tr>
					<tr>
						<td>8</td>
						<td>...</td>
						<td>...</td>
					</tr>
					<tr class="danger">
						<td>9</td>
						<td>.danger</td>
						<td>标识危险或潜在的带来负面影响的动作</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
